<template>
	<div>
		<template v-if="status === apiStatus.loading">
			<i class="status-icon validating" />
			<i class="status-icon validating" />
			<i class="status-icon validating" />
		</template>
		<template v-else-if="status === apiStatus.success || status === apiStatus.completed">
			<i class="status-icon" :class="`--${status}`" />
		</template>
		<template v-else-if="optional">
			<i class="status-icon --success" />
		</template>
		<template v-else>
			<i class="status-icon" :class="`--${status}`" />
		</template>
		<span class="status-text">
			{{ statusText }}
		</span>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from "vue";
import { ApiStatus } from "@/datav/types/data-source";

export default defineComponent({
	name: "DisplayApiStatus",
	props: {
		status: {
			type: String as PropType<ApiStatus | string>,
			default: ApiStatus.incomplete
		},
		loadingText: {
			type: String,
			default: "匹配中"
		},
		successText: {
			type: String,
			default: "匹配成功"
		},
		failedText: {
			type: String,
			default: "未找到字段"
		},
		completedText: {
			type: String,
			default: "配置完成"
		},
		incompleteText: {
			type: String,
			default: "配置未完成"
		},
		optional: {
			type: Boolean,
			default: false
		}
	},
	setup(props) {
		const statusText = computed(() => {
			if (props.status === ApiStatus.loading) {
				return props.loadingText;
			}

			if (props.status === ApiStatus.success) {
				return props.successText;
			}

			if (props.status === ApiStatus.completed) {
				return props.completedText;
			}

			if (props.optional) {
				return "可选";
			}

			if (props.status === ApiStatus.failed) {
				return props.failedText;
			}

			if (props.status === ApiStatus.incomplete) {
				return props.incompleteText;
			}

			return props.status;
		});

		return {
			apiStatus: ApiStatus,
			statusText
		};
	}
});
</script>

<style lang="scss" scoped>
@import "@/datav/styles/themes/var";
@import "@/components/UI/loading/src/loading";

.status-icon {
	@include square-loading-icon();

	&.--failed,
	&.--incomplete {
		background: $warn-main;
	}
}

.status-text {
	color: $font-color;
}
</style>
